/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Platform,
    ListView,
    TouchableOpacity,
    AlertIOS,
    Image
} from 'react-native';
import Dimensions from 'Dimensions';
const {width,height} = Dimensions.get('window');
import Navigator from 'react-native-deprecated-custom-components/src/Navigator';
import Icon from 'react-native-vector-icons/Ionicons';
import Second from './second';
import Mock from 'mockjs';
export default class list extends Component {

    constructor(props){
        super(props);
        this.state={
            dataSource:new  ListView.DataSource({
                rowHasChanged:(r1,r2)=>r1!==r2
            }),

        }
    }
    render() {
        return (

            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.headerText}>
                        视频列表
                    </Text>
                </View>
                {/*列表页面*/}
                <ListView
                  dataSource={this.state.dataSource}
                  renderRow={this._renderRow.bind(this)}
                />
            </View>
        );
    }
    _renderRow(rowData){
        return(
            <TouchableOpacity activeOPacity={0.5} onPress={this.pushTo.bind(this)}>

                <View style={styles.rowViewStyle}>
                    {/*标题文字*/}
                  <Text style={styles.title}>{rowData.title}</Text>

                    {/*封面图片*/}
                    <Image style={styles.thumbStyle} source={{uri:rowData.thumb}}>
                        <Icon
                        name="ios-play"
                        size={30}
                        style={styles.play}
                        />
                    </Image>

                    <View style={styles.cellFooter}>
                        {/*点赞*/}

                        <View style={styles.footerBox}>
                            <Icon name="ios-heart-outline"
                                  size={30}
                                  style={styles.BoxIcon}
                        />
                            <Text style={styles.BoxText}>点赞</Text>
                        </View>

                        <View style={styles.lineStyle}></View>

                        {/*评论*/}
                        <View style={styles.footerBox}>
                            <Icon name="ios-chatbubbles"
                                  size={30}
                                  style={styles.BoxIcon}
                            />
                            <Text style={styles.BoxText}>评论</Text>
                        </View>

                    </View>
                </View>
            </TouchableOpacity>
        )
    }
    pushTo(){
        this.props.navigator.push({
            title : 'second',
            component:Second,
            params : {
                name : 'Tom'
            }
        })

    }
    componentDidMount(){
        //加载数据
       // this.dsfetchData();

    }
    componentWillMount(){
        this._fetchData();
    }
    _fetchData(){
        let url = 'http://rapapi.org/mockjs/34028/api/list?accessToken=sss';
        fetch(url).then(
            (response)=>{
                return response.json()
            }
        ).then(
            (response)=>{
                let result = Mock.mock(response);
                //if (result.success){
                    this.setState({
                        dataSource:this.state.dataSource.cloneWithRows(
                            result.data
                        )
                    })
                //}
            }
        )
    }
    dsfetchData(){
        let resultArr=Mock.mock({"data|20":[{"success":true,"_id":"@ID","title":"@cparagraph(1,3)","thumb":"@IMG(1280x720,@color())","video":"http:\/\/www.pearvideo.com\/video_1338726"}]})
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(resultArr.data)
        });
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#dddddd',
    },
    header:{
        paddingTop:25,
        paddingBottom:15,
        backgroundColor:'#dddddd',
        borderBottomWidth:0.5,
        borderBottomColor:'black',
    },
    headerText:{
        fontSize:16,
        fontWeight:'600',
        textAlign:'center',
    },
    rowViewStyle:{
        width:width,
        marginBottom:10,
        backgroundColor:'white',
    },
    title:{
        fontSize:18,
        padding:10,
        color:'black',

    },
    thumbStyle:{
        width:width,
        height:width*0.56,
        resizeMode:'cover',
    },
    cellFooter:{
        flexDirection:'row',
        justifyContent:'space-between',
    },
    footerBox:{
        padding:10,
        flexDirection:'row',
        backgroundColor:'white',
        marginLeft:48,
        marginRight:48,
    },
    play:{
      position:'absolute',
      bottom:14,
      right:14,
      width:45,
      height:45,
      paddingTop:9,
      paddingLeft:18,
      backgroundColor:'transparent',
      borderColor:'black',
      borderWidth:1,
      borderRadius:23,
    },
    BoxIcon:{
      fontSize:22,
      color:'#333',
    },
    BoxText:{
      fontSize:18,
      color:'#333',
      paddingLeft:12,

    },
    lineStyle:{
        width:1,
        backgroundColor:'#dddddd'
    }
});